<template>
  <!-- 公文管理 -->
  <div class="app">
    <div style="height: 65%">
      <div class="title">
        <h4><i class="T0"><img src="@/assets/img/232.png" alt=""></i> 上级来文</h4>
        <el-button type="text">更多</el-button>
      </div>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="未阅" name="first">
          <el-table
            :data="readermain"
            style="width: 100%"
            @selection-change="handleSectionChange_2"
          >
            <el-table-column prop="date" label="类型"> </el-table-column>
            <el-table-column prop="name" label="标题"> </el-table-column>
            <el-table-column prop="address" label="编号/文号">
            </el-table-column>
            <el-table-column prop="address" label="来源"> </el-table-column>
            <el-table-column prop="address" label="日期"> </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="已阅" name="second">
          <el-table
            :data="readers"
            style="width: 100%"
            @selection-change="handleSectionChange_2"
          >
            <el-table-column prop="date" label="类型"> </el-table-column>
            <el-table-column prop="name" label="标题"> </el-table-column>
            <el-table-column prop="address" label="编号/文号">
            </el-table-column>
            <el-table-column prop="address" label="来源"> </el-table-column>
            <el-table-column prop="address" label="日期"> </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-button type="primary" class="button_1" round>收文登记</el-button>
      </el-tabs>
    </div>
    <div style="height: 65%">
      <div class="title_2">
        <h4><i class="T0"><img src="@/assets/img/231.png" alt=""></i> 内部发文</h4>
        <el-button type="text">更多</el-button>
      </div>
      <el-tabs v-model="tabName" @tab-click="handleClick">
        <el-tab-pane label="未阅" name="1">
          <el-table
            :data="readertab"
            style="width: 100%"
            @selection-change="handleSectionChange"
          >
            <el-table-column prop="date" label="类型"> </el-table-column>
            <el-table-column prop="name" label="标题"> </el-table-column>
            <el-table-column prop="address" label="地点"> </el-table-column>
            <el-table-column prop="address" label="日期"> </el-table-column>
            <el-table-column prop="address" label="时间"> </el-table-column>
          </el-table>
        </el-tab-pane>
        
        <el-tab-pane label="已阅" name="2">
          <el-table
            :data="onreadertab"
            style="width: 100%"
            @selection-change="handleSectionChange"
          >
            <el-table-column prop="date" label="类型"> </el-table-column>
            <el-table-column prop="name" label="标题"> </el-table-column>
            <el-table-column prop="address" label="地点"> </el-table-column>
            <el-table-column prop="address" label="日期"> </el-table-column>
            <el-table-column prop="address" label="时间"> </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-button type="primary" class="button_2" round @click="goDraft">新建文件</el-button>
      </el-tabs>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      value: new Data(),
      tableData: [],
      readertab: [],
      onreadertab: [],
      readers: [],
      readermain: [],
      activeName: "first",
      tabName: "1",
    };
  },
  methods: {
    handleSectionChange(val) {
      this.message = val;
    },

    handleSectionChange_2(val) {
      this.tableChecked = val;
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    //前往收发文件管理界面
    goDraft() {
      this.$router.push('/draft');
    }
  },
};
</script>
<style   scoped>
.app {
  height: 60%;
  margin: 0;
  padding: 0;
}
.el-button {
  margin-right: 10px;
  color: #fff;
}

.title {
  display: flex;
  justify-content: space-between;
  background: #99999985;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  height: 30px;
}
.title_2 {
  display: flex;
  justify-content: space-between;
  background: #99999985;
  height: 30px;
}
.el-button--text {
  color: #fff;
}
h4 {
  margin: 0;
  /* margin-left: 30px; */
  color: #fff;
}
.T0{
  margin-left: 20px;
}
.title .el-table .td {
  border-bottom: 1px solid red;
}
.button_2 {
  position: fixed;
  top: 56.5%;
  right: 10%;
  background-color: rgb(255, 59, 59);
}
.button_1 {
  position: fixed;
  top: 31%;
  background-color: rgb(252, 59, 59);
  right: 10%;
}
</style>